<template>
  <div>
    <van-tabs v-model="activeId">
      <!-- 只要tab切换了 v-model就是name属性的值 -->
      <van-tab v-for="i in cate" :title="i.title" :key="i._id" :name="i._id">
      </van-tab>
    </van-tabs>
    <div>
      <van-card
        v-for="item in result"
        :key="item._id"
        :price="item.price"
        :title="item.title"
        :thumb="item.pic"
        @click="$router.push('/detail/' + item._id)"
      >
        <template #footer>
          <van-button size="mini" @click.stop="add(item)">+</van-button>
          <!-- stop是阻止冒泡 -->
        </template>
      </van-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cate: [],
      //分类数据
      list: [],
      //列表数据
      activeId: "",
      //当前选中的id
      result: [],
      //保存筛选的结果
    };
  },
  methods: {
    getCate() {
      this.$axios.get("fenlei.json").then((res) => {
        console.log(res);
        this.cate = res.data.result;
      });
    },
    getList() {
      this.$axios.get("list.json").then((res) => {
        console.log(res);
        this.list = res.data.result;
        this.result = this.list.filter(
          (i) => i.cid == "59f1e1ada1da8b15d42234e9"
        );
        //进入页面就进行第一个tab的筛选
      });
    },
    add(item) {
      this.$store.commit("add", item);
    },
  },
  created() {
    this.getCate();
    this.getList();
  },
  mounted() {},
  components: {},
  computed: {},
  watch: {
    activeId(newVal) {
      this.result = this.list.filter((i) => i.cid == newVal);
    },
    //没有绑定点击事件 只要 activeId发生变化就进行筛选
  },
};
</script>

<style lang="scss" scoped></style>
